<!doctype html>
<html>
<head>
<script src="jquery-2.2.4.min.js"></script>
<meta charset="utf-8">
<title>用户管理</title>
<style>
	body{
		text-align:center
	}
	#box{
		margin:50px auto;
	}
	#queryResult{
		margin: 0 auto;
	}
	h1{
		margin: 0 auto;
	}
	</style>
	<script>
		function add(){
			var username=$("#username").val();
			var password=$("#password").val();
			var email=$("#email").val();
			var obj = {
		    username : $("#username").val(),
		    password : $("#password").val(),
			email:$("#email").val()
			}
					if(!username){
						alert("用户名必填!");
						$("#username").focus();//获取焦点
						return ;
					}
					if(!password){
						alert("密码必填!");
						$("#password").focus();//获取焦点
						return ;
					
				}
				if(!emai){
						alert("密码必填!");
						$("#emai").focus();//获取焦点
						return ;
					
				}
			
		$.ajax({
			type:"POST",
			url:"",
			data:obj,
			cache:true,
			async:true,
			success:function(data){
					alert("添加成功");
			},
			error:function(){
				alert('出错了');
			}
		});
		}	
	$(document).ready(function() {
      $.ajax({
        url : "",// url：要请求的跨域接口
        type : "post",//请求方式
        async : false,//是否异步请求
        success : function(data) {  //如果请求成功，返回数据。
        var html = "";
        for(var i=0;i<data.length;i++){  //遍历data数组
            var ls = data[i];   
            html +="<span>测试："+ls.name+"</span>";
          }
          $("#queryResult").html(html); //在html页面id=queryResult的标签里显示html内容
        },
      });
    });

			</script>
</head>

<body>
	 <h1>用户管理</h1>
	<form id="box">

用户名:<input type="text" value="" id="username" name="username"><br>
密码:<input type="text" value="" id="password" name="password"><br>
邮箱:<input type="text" valien="" id="email"  name="email"><br>
<input type="button" value="添加" id="but" onClick="add()"/>
	<table id="queryResult"  align="center" bordercolor="#000" width="300" border="1" cellpadding="3">
      <tr>
          <td>用户名</td>
          <td>密码</td>
          <td>邮箱</td>
      </tr>
      <tr>
          <td></td>
          <td></td>
		  <td></td>
      </tr>
  </table>
</form>
</body>
</html>
